<template>
    <div class="client-btn">
      <!-- <el-button @click="showBtn">客服按钮</el-button>

      <div>
        <div>我的数据来自未读消息接口</div>
        <div>未读消息数量: <b id="unreadNum">0</b></div>
        <div>最后一条未读消息的内容:<b id="unreadMsg"></b></div>
    </div> -->
    </div>
</template>

<script>
export default {
  methods:{
    // 显示按钮
    showBtn(){
      window._MEIQIA('showPanel');
      _MEIQIA('getUnreadMsg', this.yourFunction);
    },
    yourFunction(msg) {
        var text = '',
            num = 0;
        if (msg === 'hasBeenRead') { // 消息已被阅读
            num = 0;
        } else if (typeof(msg) === 'object') {
            var unreadNum = document.getElementById('unreadNum').innerHTML,
                lastMsg = msg[msg.length - 1];
            num = isNaN(+unreadNum) ? msg.length : +unreadNum + msg.length;
            // content_type 是消息的类型：
            // text（文字）、photo（图片）、file（文件）
            // content 是消息的内容
            if (lastMsg.content_type === 'text') {
                // 文字消息中可能会存在表情图片，由于路径问题
                // 将文字消息中的图片处理为文字'[表情]'
                text = lastMsg.content.replace(
                    /<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '[表情]'
                );
            } else if (lastMsg.content_type === 'photo') {
                text = '[图片]';
            } else if (lastMsg.content_type === 'file') {
                text = '[文件]';
            } else {
                text = '[新消息]';
            }
        }
        // 未读消息数量
        // document.getElementById('unreadNum').innerHTML = num;
        // 最后一条消息的内容
        document.getElementById('unreadMsg').innerHTML = text;
    }
  }
}
</script>

<style>
.client-btn{
  position: fixed;
  bottom: 150px;
  right: 20px;
  z-index: 100;
}
</style>